<template>
  <n-card class="question-block" size="small">
    <n-row>
      <!-- 左侧点赞栏 -->
      <n-col :span="2">
        <div class="chip-col" size="large">
          <n-button class="chip" type="error" ghost @click.stop="likeQ">
            {{ item.likeCount }}
            <transition :name="item.liked ? 'zoom' : ''" mode="out-in">
              <n-icon size="large" v-if="item.liked">
                <Heart16Filled></Heart16Filled>
              </n-icon>
              <n-icon size="large" color="#e03c1d" v-else>
                <Heart16Regular></Heart16Regular>
              </n-icon>
            </transition>
          </n-button>
          <n-button
            class="chip"
            type="success"
            :ghost="item.solved ? false : true"
            @click="openWindow('/forum/detail/' + item.id + '/#comment')"
          >
            {{ item.answerCount }}
            <n-icon v-if="item.solved">
              <Comment12Regular></Comment12Regular>
            </n-icon>
            <n-icon v-else>
              <Comment12Filled></Comment12Filled>
            </n-icon>
          </n-button></div
      ></n-col>
      <!-- 中间内容区 -->
      <n-col :span="20">
        <n-space vertical :size="1">
          <!-- 标题 -->
          <div
            class="question-title"
            @click="openWindow('/forum/detail/' + item.id)"
          >
            {{ item.title }}
          </div>
          <!-- 时间 -->
          <div class="question-date">
            回复时间：{{ item.replyTime ? '' : '暂无' }}
            <n-time
              v-if="item.replyTime"
              :time="new Date(item.replyTime)"
              type="datetime"
            />
            <n-divider vertical></n-divider>发布时间：
            <n-time :time="new Date(item.createTime)" type="datetime" />
          </div>
          <!-- 内容 -->
          <div class="question-content text-justify">{{ item.content }}</div>
          <!-- <div class="question-img" v-if="item.image != ''">
                    <img
                      :src="item.image"
                      class="questionImgItem"
                      fit="contain"
                      lazy
                    />
                  </div> -->
        </n-space>
      </n-col>
      <!-- 右侧栏 -->
      <n-col :span="5" class="question-right">
        <n-icon size="medium" style="padding-top: 2px">
          <EyeOutline></EyeOutline>
        </n-icon>
        <span>
          {{ item.viewCount }}
        </span>
      </n-col>
    </n-row>
  </n-card>
</template>

<script setup>
import {
  Comment12Regular,
  Comment12Filled,
  Heart16Filled,
  Heart16Regular
} from '@vicons/fluent'
import { EyeOutline } from '@vicons/ionicons5'
import api from '@/api/api'
const props = defineProps({
  item: Object
})
const item = computed(() => props.item)
const router = useRouter()
const openWindow = (url) => {
  window.open(url, '_blank')
}
//设置收藏
const { Help } = api
const likeLoading = ref(false)
const likeQ = () => {
  likeLoading.value = true
  if (item.value.liked) {
    item.value.likeCount--
  } else {
    item.value.likeCount++
  }
  item.value.liked = !item.value.liked
  Help.likeHelp({
    id: item.value.id,
    likeStatus: item.value.liked ? -1 : 1
  }).then((res) => {
    likeLoading.value = false
    if (res.success) {
      item.value.liked = res.data.likeStatus
    }
  })
}
</script>

<style scoped lang="scss">
.question {
  .question-block {
    display: flex;
    position: relative;
    margin-bottom: 8px;
    border-radius: 15px;
    transition: all 0.4s;
    &:hover {
      background-color: rgba(255, 250, 245, 0.587);
    }
  }
  .question-title {
    font-size: 1.4em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 18px;
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
  .question-date {
    color: rgb(136, 136, 136);
    margin: 4px 0;
    font-size: 0.95em;
  }
  .question-content {
    color: rgb(136, 136, 136);
    font-size: 1.15em;
    line-height: 1.25em;
    /* 3行溢出 */
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .question-img {
    margin: 15px 0 10px;
    display: flex;
    justify-content: flex-start;
    img {
      height: 100px;
      width: auto;
      margin-right: 10px;
    }
  }
  .question-right {
    width: 45px;
    font-size: 14px;
    color: rgb(83, 83, 83);
    position: absolute;
    right: 10px;
    display: flex;
  }
  .chip {
    display: flex;
    height: 50px;
    width: 4em;
    border-radius: 5px;
    text-align: center;
    font-size: 0.8rem;
    align-items: center;
    justify-content: center;
  }
  .chip-col {
    height: 140px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly; /* 水平均匀分布 */
    align-items: center; /* 垂直居中 */
    flex-direction: column;
    margin: 10px 20px 5px 0;
  }
}

.zoom-enter-active,
.zoom-leave-active {
  transition: all 0.15s cubic-bezier(0.42, 0, 0.34, 1.55);
}

.zoom-enter,
.zoom-leave-to {
  transition: all 0.15s ease-out;
  transform: scale(0.6);
}

.zoom-enter-to,
.zoom-leave {
  transition: all 0.2s ease-out;
  transform: scale(1.2);
}

// btn padding shift
.n-button {
  padding: 0;
}
</style>
